<template>
  <div class="dataDimenRedu">
    <el-row :gutter="20">
      <el-col
        :span="11"
        style="
          border-radius: 10px;
          box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
          background-color: #fff;
          margin-bottom: 0px;
        "
      >
        <div
          class="grid-content ep-bg-purple"
          style="width: 100%; height: calc(100vh - 60px)"
        >
          <h4 class="header_1">降维配置</h4>
          <div class="fileSelection">
            <div class="title">选择数据文件</div>
            <el-input
              v-model="fileName"
              style="max-width: 100%"
              class="input-with-select"
            >
              <template #append>
                <el-upload
                  ref="fileRef"
                  class="upload-demo"
                  action="#"
                  :limit="1"
                  accept=".mat,.xlsx,.csv"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="handleChange"
                  :on-exceed="handleExceed"
                >
                  <template #trigger>
                    <el-button type="primary">...</el-button>
                  </template>
                </el-upload>
              </template>
            </el-input>
          </div>
          <div class="dimenredu">
            <div class="title">降维方法</div>
            <el-select v-model="c_way" style="width: 100%">
              <el-option
                v-for="item in dimenredu_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- <div class="storePath">
            <div class="title">选择保存路径</div>
            <el-input
              v-model="s_path"
              style="max-width: 100%"
              class="input-with-select"
            >
              <template #append>
                <el-button @click="handleSavePath">...</el-button>
              </template>
            </el-input>
          </div> -->
          <div class="btns">
            <el-button
              type="primary"
              style="padding: 10px 40px"
              :disabled="isDisabled"
              @click="uploadBtn"
              >{{ dimRed_status }}</el-button
            >
            <!-- <el-button type="warning" style="padding: 10px 20px">暂停</el-button>
            <el-button type="danger" style="padding: 10px 20px">结束</el-button> -->
          </div>
        </div>
      </el-col>
      <el-col :span="0.5"></el-col>
      <el-col
        :span="12"
        style="
          border-radius: 10px;
          box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
          background-color: #fff;
          margin-bottom: 0px;
        "
      >
        <div
          class="grid-content ep-bg-purple"
          style="width: 100%; height: 100%"
        >
          <!-- <h4 class="header_2">状态栏</h4> -->
          <div class="over_btn">
            <el-tag :type="tagType" style="padding: 15px 45%; font-size: 18px">
              {{ d_status }}
            </el-tag>
          </div>
          <div class="upchart"></div>
          <div class="downchart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import echarts from "@/plugins/echarts";
import { EffectScatterChart, ScatterChart } from "echarts/charts";
echarts.use([EffectScatterChart]);
echarts.use([ScatterChart]);
import { ref, onMounted, computed } from "vue";
import { codeDimreduction } from "@/api/dataProcessing";
import { genFileId } from "element-plus";

const fileName = ref("");
const c_way = ref(0);
const dimRed_status = ref("开始降维");
const d_status = ref("未降维");
const isDisabled = ref(false);
const chartYName = ref("齿轮箱振动数据");

const dimenredu_options = [
  {
    value: 0,
    label: "主成成分分析(PCA)"
  },
  {
    value: 1,
    label: "局部线性嵌入式降维(LLE)"
  }
];
onMounted(() => {
  getChart();
  getChart1();
});

const changeYName = () => {
  if (c_way.value === 0) {
    chartYName.value = "齿轮箱振动数据";
  } else if (c_way.value === 1) {
    chartYName.value = "齿轮箱振动数据";
  }
};

let myChart = ref();
function getChart() {
  var chartDom = document.querySelector(".upchart");
  myChart.value = echarts.init(chartDom);
  var option = {
    title: {
      text: "数据降维前",
      textStyle: {
        fontSize: 15 // 设置字号为 14px
      }
    },
    legend: {
      right: "15%",
      data: ["输入轴", "平行轴", "相交轴", "输出轴"],
      icon: "roundRect",
      top: "5%",
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      // trigger: 'axis',
      showDelay: 0,
      formatter: function (params) {
        if (params.value.length > 1) {
          return (
            params.seriesName +
            " :<br/>" +
            params.value +
            " " +
            params.value +
            " "
          );
        } else {
          return (
            params.seriesName +
            " :<br/>" +
            params.name +
            " : " +
            params.value +
            " "
          );
        }
      },
      axisPointer: {
        show: true,
        type: "cross",
        lineStyle: {
          type: "dashed",
          width: 1
        }
      }
    },
    xAxis: {
      type: "category"
    },
    yAxis: {
      name: chartYName.value,
      type: "value",
      nameRotate: 0.1
    },
    series: [
      {
        name: "输入轴",
        symbolSize: 5,
        data: [
          [8.07, 6.95],
          [13.0, 7.58]
        ],
        type: "scatter"
      },
      {
        name: "平行轴",
        symbolSize: 5,
        data: [
          [10.0, 8.04],
          [8.07, 6.95]
        ],
        type: "scatter"
      },
      {
        name: "相交轴",
        symbolSize: 5,
        data: [
          [12.5, 6.82],
          [9.15, 7.2]
        ],
        type: "scatter"
      },
      {
        name: "输出轴",
        symbolSize: 5,
        data: [
          [10.0, 6.33],
          [14.0, 8.96]
        ],
        type: "scatter"
      }
    ]
  };
  option && myChart.value.setOption(option);
}
let myChart1 = ref();
function getChart1() {
  var chartDom = document.querySelector(".downchart");
  myChart1.value = echarts.init(chartDom);
  var option = {
    title: {
      text: "数据降维后",
      textStyle: {
        fontSize: 15 // 设置字号为 14px
      }
    },
    legend: {
      right: "15%",
      data: ["主振动成分", "次振动成分"],
      icon: "roundRect",
      top: "5%",
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      // trigger: 'axis',
      showDelay: 0,
      formatter: function (params) {
        if (params.value.length > 1) {
          return (
            params.seriesName +
            " :<br/>" +
            params.value +
            " " +
            params.value +
            " "
          );
        } else {
          return (
            params.seriesName +
            " :<br/>" +
            params.name +
            " : " +
            params.value +
            " "
          );
        }
      },
      axisPointer: {
        show: true,
        type: "cross",
        lineStyle: {
          type: "dashed",
          width: 1
        }
      }
    },
    xAxis: {
      type: "category"
    },
    yAxis: {
      name: chartYName.value,
      type: "value",
      nameRotate: 0.1
    },
    series: [
      {
        name: "主振动成分",
        symbolSize: 5,
        data: [
          [12.2, 7.83],
          [2.02, 4.47]
        ],
        type: "scatter"
      },
      {
        name: "次振动成分",
        symbolSize: 5,
        data: [
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]
        ],
        type: "scatter"
      }
    ]
  };
  option && myChart1.value.setOption(option);
}

let fileRef = ref();
let fileUp = ref();
// 选择文件时被调用，将他赋值给fileRef
const handleChange = file => {
  fileRef.value = file;
  fileName.value = file.name;
  fileUp.value = file;
};

// 覆盖前一个选择的
const handleExceed = files => {
  fileRef.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  fileRef.value.handleStart(file);
};

// 开始降维
const uploadBtn = () => {
  if (fileUp.value) {
    changeYName();
    dimRed_status.value = "降维中...";
    d_status.value = "降维中...";
    isDisabled.value = true;
    let formData = new FormData();
    formData.append("method", c_way.value);
    formData.append("file", fileUp.value.raw);
    codeDimreduction(formData)
      .then(res => {
        if (res.status === 200) {
          myChart.value.setOption({
            series: [
              {
                data: res.data.list1
              },
              {
                data: res.data.list2
              },
              {
                data: res.data.list3
              },
              {
                data: res.data.list4
              }
            ]
          });
          myChart1.value.setOption({
            series: [
              {
                data: res.data.oridata
              },
              {
                data: res.data.prodata
              }
            ]
          });
          if (res.data.prodata.length > 0) {
            d_status.value = "降维完成";
            dimRed_status.value = "开始降维";
            isDisabled.value = false;
          }
        } else {
          d_status.value = "降维失败";
          dimRed_status.value = "开始降维";
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
};
function handleFileUpload() {
  // 处理文件上传逻辑
  const inputElement = document.createElement("input");
  inputElement.type = "file";
  inputElement.accept = ".mat,.csv"; // 设置允许的文件类型
  inputElement.onchange = event => {
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      // 检查文件类型
      const fileType = selectedFile.name.split(".").pop().toLowerCase();
      if (fileType !== "mat" && fileType !== "csv") {
        // 提示用户选择正确的文件类型
        alert("请选择 .mat 或 .csv 文件");
        return; // 中止上传
      }

      // 文件类型验证通过，更新界面显示选定的文件名
      file.value = selectedFile.name;
      // 可以根据需要将文件信息存储在其他变量中
    }
  };
  inputElement.click();
}

function handleSavePath() {
  // 处理保存路径逻辑
  const inputElement = document.createElement("input");
  inputElement.type = "file";
  inputElement.webkitdirectory = true; // 在 Chrome 中选择文件夹
  inputElement.multiple = false; // 只能选择一个文件夹
  inputElement.onchange = event => {
    const selectedPath = event.target.files[0].path;
    if (selectedPath) {
      s_path.value = selectedPath;
      // 可以根据需要将路径信息存储在其他变量中
    }
  };
  inputElement.click();
}
//计算属性
const tagType = computed(() => {
  if (d_status.value === "未降维") {
    return "danger";
  } else if (d_status.value === "降维完成") {
    return "success";
  }
});
</script>

<style lang="scss" scoped>
.dataDimenRedu {
  width: 100%;
  height: 100%;
  font-size: 16px;

  .header_1,
  .header_2 {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
  }

  .fileSelection {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }

  .dimenredu {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
  }

  .storePath {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
  }

  .btns {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
  }

  .over_btn {
    margin-top: 20px;
    text-align: center;
  }

  .upchart {
    width: 100%;
    height: 300px;
    margin-top: 20px;
  }

  .downchart {
    width: 100%;
    height: 300px;
  }
}
</style>
